<template>
  <el-form :model="paper" size="mini" label-position="left">
    <el-form-item label="页面类型:" label-width="100px">
      <el-select v-model="paper.paperType" @change="handlePaperTypeChange">
        <el-option
          v-for="(item,index) in paperTypeOptions"
          :key="index+1"
          :value="item.value"
          :label="item.label"
        />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-row>
        <el-col :span="12">
          <label style="margin-right: 15px;">页面宽(毫米):</label>
          <el-input v-model="location.width" oninput="value=value.replace(/[^\d]/g,'')" style="width: 180px;" :disabled="paper.paperType!=='CUSTOM'" />
        </el-col>
        <el-col :span="12">
          <label style="margin-right: 15px;">页面高(毫米):</label>
          <el-input v-model="location.height" oninput="value=value.replace(/[^\d]/g,'')" style="width: 180px;" :disabled="paper.paperType!=='CUSTOM'" />
        </el-col>
      </el-row>
    </el-form-item>
    <el-form-item>
      <el-row>
        <el-col :span="12">
          <label style="margin-right: 15px;">左边距(毫米):</label>
          <el-input v-model="location.leftMargin" oninput="value=value.replace(/[^\d]/g,'')" style="width: 180px;" @change="handlemLeftMargin" />
        </el-col>
        <el-col :span="12">
          <label style="margin-right: 15px;">右边距(毫米):</label>
          <el-input v-model="location.rightMargin" oninput="value=value.replace(/[^\d]/g,'')" style="width: 180px;" @change="handlemRightMargin" />
        </el-col>
      </el-row>
    </el-form-item>
    <el-form-item>
      <el-row>
        <el-col :span="12">
          <label style="margin-right: 15px;">上边距(毫米):</label>
          <el-input v-model="location.topMargin" oninput="value=value.replace(/[^\d]/g,'')" style="width: 180px;" @change="handlemTopMargin" />
        </el-col>
        <el-col :span="12">
          <label style="margin-right: 15px;">下边距(毫米):</label>
          <el-input v-model="location.bottomMargin" oninput="value=value.replace(/[^\d]/g,'')" style="width: 180px;" @change="handlemBottomMargin" />
        </el-col>
      </el-row>
    </el-form-item>
    <el-form-item label="展示方向:" label-width="100px">
      <el-select v-model="paper.orientation" @change="handleOrientationChange">
        <el-option
          v-for="(item,index) in orientationOptions"
          :key="index+1"
          :value="item.value"
          :label="item.label"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="页面对齐方式:">
      <el-select v-model="paper.htmlReportAlign">
        <el-option
          v-for="(item,index) in htmlReportAlignOptions"
          :key="index+1"
          :value="item.value"
          :label="item.label"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="套打背景图:" label-width="100px">
      <el-input v-model="paper.bgImage" style="width: 480px" @change="handleChange" />
    </el-form-item>
    <el-form-item label="本地图片:" label-width="100px">
      <el-button plain @click="handleImage">选择本地图片</el-button>
    </el-form-item>
    <el-dialog
      title="选择本地图片"
      :visible.sync="dialogVisible"
      append-to-body
      :close-on-click-modal="false"
      width="450px"
    >
    <div style="height: 400px;overflow: auto;">
      <el-image class="report-image" v-for="url in urls" :key="url" :src="url" lazy @click="handleSaveImage(url)"></el-image>
    </div>
    </el-dialog>
  </el-form>
</template>

<script>
import { undoManager, pointToMM, mmToPoint, buildPageSizeList } from '../../Utils.js'
import { getImages } from '@/api/designer'

export default {
  name: 'PageSettings',
  props: {
    context: {
      type: Object,
      required: true
    }
  },
  data: function() {
    return {
      dialogVisible: false,
      urls: [],
      paper: {
        paperType: 'A4'
      },
      location: {
        width: 0,
        height: 0,
        leftMargin: 0,
        rightMargin: 0,
        topMargin: 0,
        bottomMargin: 0
      },
      paperSizeList: [],
      paperTypeOptions: [
        { label: 'A2', value: 'A2' },
        { label: 'A3', value: 'A3' },
        { label: 'A4', value: 'A4' },
        { label: 'A5', value: 'A5' },
        { label: 'A6', value: 'A6' },
        { label: 'B2', value: 'B2' },
        { label: 'B3', value: 'B3' },
        { label: 'B4', value: 'B4' },
        { label: 'B5', value: 'B5' },
        { label: 'B6', value: 'B6' },
        { label: '自定义', value: 'CUSTOM' }
      ],
      orientationOptions: [
        { label: '纵向', value: 'portrait' },
        { label: '横向', value: 'landscape' }
      ],
      htmlReportAlignOptions: [
        { label: '居左', value: 'left' },
        { label: '居中', value: 'center' },
        { label: '居右', value: 'right' }
      ]
    }
  },
  watch: {
    context: function(val) {
      this.init()
    }
  },
  mounted: function() {
    this.paperSizeList = buildPageSizeList()
    this.init()
  },
  methods: {
    init() {
      this.paper = this.context.reportDef.paper
      if (this.paper.paperType !== 'CUSTOM') {
        const pageSize = this.paperSizeList[this.paper.paperType]
        this.location.width = pageSize.width
        this.location.height = pageSize.height
      } else {
        this.location.width = pointToMM(this.paper.width)
        this.location.height = pointToMM(this.paper.height)
      }
      this.location.leftMargin = pointToMM(this.paper.leftMargin)
      this.location.rightMargin = pointToMM(this.paper.rightMargin)
      this.location.topMargin = pointToMM(this.paper.topMargin)
      this.location.bottomMargin = pointToMM(this.paper.bottomMargin)
    },
    handlePaperTypeChange(value) {
      if (value !== 'CUSTOM') {
        const pageSize = this.paperSizeList[value]
        this.paper.width = mmToPoint(pageSize.width)
        this.paper.height = mmToPoint(pageSize.height)
        this.location.width = pageSize.width
        this.location.height = pageSize.height
        this.context.printLine.refresh()
      }
    },
    handleOrientationChange(value) {
      this.context.printLine.refresh()
    },
    handlemLeftMargin(val) {
      this.paper.leftMargin = mmToPoint(val)
    },
    handlemRightMargin(val) {
      this.paper.rightMargin = mmToPoint(val)
    },
    handlemTopMargin(val) {
      this.paper.topMargin = mmToPoint(val)
    },
    handlemBottomMargin(val) {
      this.paper.bottomMargin = mmToPoint(val)
    },
    handleImage() {
      getImages({}).then(response => {
        const report = response.data || []
        const urls = []
        for (const url of report) {
          urls.push(url)
        }
        this.urls = urls
        this.dialogVisible = true
      })
    },
    handleSaveImage(url) {
      this.paper.bgImage = url
      this.setBackGroundImage(url)
      this.dialogVisible = false
    },
    setBackGroundImage(url) {
      const ele = document.getElementById('designer')
      const targets = ele.querySelectorAll('.ht_master')
      if (targets.length > 0) {
        if (url) {
          targets[0].style.background = 'url(' + url + ') 52px 27px no-repeat'
        } else {
          targets[0].style.background = 'transparent'
        }
      }
    },
    handleChange(val) {
      this.setBackGroundImage(val)
    }
  }
}
</script>

<style>
</style>
